<template>
  <div class="cars_list">
    <div class="top">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="车辆品牌">
          <el-input placeholder="车辆品牌"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">搜索</el-button>
          <el-button type="primary">重置</el-button>
          <el-button type="primary" @click="showCarsBrand"
            >新增车辆品牌</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom">
      <tableData :config="table_config" ref="tableData">
        <template v-slot:imgUrl="slotData">
          <el-image
            style="width: 100px; height: 100px"
            :src="slotData.data.imgUrl"
          ></el-image>
        </template>
        <template v-slot:status="slotData">
          <el-switch
            active-color="#13ce66"
            inactive-color="#ff4949"
            v-model="slotData.data.status"
          >
          </el-switch>
        </template>
        <template v-slot:operation="slotData">
          <el-button
            type="danger"
            size="small"
            @click="detailed(slotData.data.id)"
            >详情</el-button
          >
        </template>
      </tableData>
    </div>
    <showCarsBrand
      :title="'新增车辆品牌'"
      :flagVisible.sync="flagVisibleCarsBrand"
      :detailData="detailData"
      @getCarsBrandList="getCarsBrandList"
    ></showCarsBrand>
  </div>
</template>

<script>
import tableData from "@/components/tableData/index";
import showCarsBrand from "@/components/dialog/showCarsBrand";
import { brandList, detailed } from "@/request/brand";
import { requestUrl } from "@/request/requestUrl";
import { messageFun } from "@/utils/element";
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      table_config: {
        thead: [
          { label: "LOGO", prop: "imgUrl", type: "slot", slotName: "imgUrl" },
          { label: "车辆品牌", prop: "nameCh" },
          { label: "禁启用", prop: "status", type: "slot", slotName: "status" },
          { label: "操作", type: "slot", slotName: "operation" },
        ],
        url: requestUrl.brandList,
        data: {
          pageSize: 10,
          pageNumber: 1,
        },
      },
      flagVisibleCarsBrand: false,
      brandList: [],
      detailData: {},
      total: 0,
    };
  },
  components: {
    showCarsBrand,
    tableData,
  },
  created() {},
  methods: {
    async detailed(id) {
      const { data } = await detailed(id);
      this.detailData = data.data;
      this.showCarsBrand();
    },
    showCarsBrand() {
      this.flagVisibleCarsBrand = true;
    },
    getCarsBrandList() {
      this.$refs.tableData.loadTableData();
    },
  },
};
</script>

<style lang="scss" scoped>
.cars_list {
  width: 100%;
  height: 100%;
  // .top {
  //   display: flex;
  //   margin-right: 30px;
  //   width: 100%;
  //   .el-form {
  //     display: flex;
  //     justify-content: space-between;
  //   }
  // }
}
</style>